<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>puke</title>
</head>

<style>
/* 多行编辑(列编辑)：Alt+Shift+鼠标左键，Ctrl+Alt+Down/Up */
    *{
        margin: 0;
        padding: 0; 
    }

    div{
      width: 310px;
      height: 438px;
      background-color: skyblue;
      margin: 100px auto;
      perspective: 500px;
    }

    div img{
        transition: transform 1s;
        transform-origin: center bottom;

    }

    div:hover img{
        transform: rotateX(80deg);
        /* transform-origin: center bottom; */
    }
</style>
<body>
    <div><img src="./Source/pk.png" alt=""></div>
</body>
</html>